import { useEffect, useRef } from "react";
import {
    ArcRotateCamera, Color4, Engine, HemisphericLight, Mesh, MeshBuilder, Plane, Scene, UniversalCamera,
    StandardMaterial, Vector3, Color3, DirectionalLight, Animation, CircleEase, EasingFunction, VertexBuffer, BackgroundMaterial, Texture, Ray, Matrix, RayHelper, Vector4, SpriteManager, ParticleSystem, GPUParticleSystem,
} from '@babylonjs/core';
import Play from '../component/Player';
import { applyMatrix4, getDefaultMatrix } from '../component/MathLib';


const canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const engine = new Engine(canvas, true);
const scene = new Scene(engine);

const camera = new UniversalCamera('Camera', new Vector3(4.629658950063656, 1.4634675388308755, 0.1374361257887976), scene);
camera.setTarget(new Vector3(-5.2188922040730015, -0.2228363747624167, -0.26557118036974503));
camera.attachControl(canvas, true);

const play = new Play(camera);
play.start();

const updateAction: ((time: number) => {})[] = [];

const light = new HemisphericLight('pxg', new Vector3(1, 1, 0), scene);
const mat1 = new StandardMaterial('myMat', scene);
mat1.ambientTexture = new Texture('../image/image03.png', scene);
// const ground = MeshBuilder.CreateGround('ground', { width: 8, height: 8, updatable: true }, scene);
// ground.material = mat1;

const box = MeshBuilder.CreateBox('box', { width: 0.2, height: 0.2, depth: 0.2 }, scene);
const mat = new BackgroundMaterial('mat', scene);
mat.useRGBColor = false;
mat.primaryColor = new Color3(1, 0, 0);
box.material = mat;



// const particleSystem = new ParticleSystem('particle', 2000, scene);
const particleSystem = new GPUParticleSystem("particles", { capacity: 1000000, randomTextureSize: 4096 }, scene);//GPU粒子

// particleSystem.startDelay = 3000;//延时启动

particleSystem.targetStopDuration = 5;//运行时间(未知)
particleSystem.disposeOnStop = true;//停止后自动销毁

const texture = new Texture("../image/image03.png", scene);
particleSystem.particleTexture = texture;
particleSystem.textureMask = new Color4(1, 1, 1, 1);//颜色蒙版(只显示指定颜色?)

//随机大小
particleSystem.minSize = 0.05;
particleSystem.maxSize = 0.06;

//随机的生命周期
particleSystem.minLifeTime = 0.3;
particleSystem.maxLifeTime = 1.5;

//根据系统设置生命周期
//  0,0.5,0.8:系统开始时从0.5-0.8之间取数设置到例子生命周期
//  1.0,0,0.1:系统结束时从0-0.1之间取数设置到例子生命周期
// particleSystem.addLifeTimeGradient(0, 0.5, 0.8);
// particleSystem.addLifeTimeGradient(0.5, 0.3, 0.7);
// particleSystem.addLifeTimeGradient(1.0, 0, 0.1);

//根据粒子生命周期设置颜色
particleSystem.addColorGradient(0, new Color4(0, 0, 1, 1));
particleSystem.addColorGradient(1.0, new Color4(1, 0, 0, 0));

//发射频率
particleSystem.emitRate = 100;

//发射方向(设置两个会在直接进行随机)
// particleSystem.direction1 = new Vector3(-7, 8, 3);
// particleSystem.direction2 = new Vector3(7, 8, -3);
particleSystem.direction2 = new Vector3(0, 6, 0);

//重力
// particleSystem.gravity = new Vector3(0, -9.81, 0);

//速度
particleSystem.minEmitPower = 1;
particleSystem.maxEmitPower = 3;
particleSystem.updateSpeed = 0.005;
particleSystem.addVelocityGradient(0, 0.5);
particleSystem.addVelocityGradient(1.0, 3);

//发射点
// particleSystem.emitter = new Vector3(0, 0, 0);
particleSystem.emitter = box;

//圆锥体发射器
// particleSystem.createConeEmitter(2, Math.PI / 3);

particleSystem.start();



const x = box.position.x;
updateAction.push((time) => {

    // box.position.z = x + -time / 6000;
    return '';
});



const RenderStructure = () => {
    const divRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        const { current } = divRef;
        if (current != null) {
            current.innerHTML = '';
            current.append(canvas);
            ani(0);
        }
    }, []);
    return (
        <div ref={divRef}></div>
    );
};

export default RenderStructure;

function ani(time: number) {
    updateAction.forEach((action) => {
        action(time);
    })
    scene.render();


    requestAnimationFrame(ani);
}